<template>
	<a-layout class="layout-main-box">
		<a-layout-header class="layout-header">
			<div class="logout" @click="logout">
				<a-icon type="logout" />
				<span>退出</span>
			</div>
		</a-layout-header>
		<a-layout class="layout-main-content">
			<a-layout-sider class="layout-aside">
				<a-menu
					mode="inline"
					:open-keys.sync="openKeys"
					v-model="selectedKeys"
					:style="{ height: '100%', borderRight: 0 }"
				>
					<template v-for="menu in constant">
						<a-sub-menu v-if="menu.children" :key="menu.name">
							<span slot="title"><a-icon type="user" />{{menu.name}}</span>
							<a-menu-item v-for="item in menu.children" :key="item.name" @click="changeNemu(item)">
								<span>{{item.name}}</span>
							</a-menu-item>
						</a-sub-menu>
						<a-menu-item v-else :key="menu.name" @click="changeNemu(menu)">
							<a-icon type="user" />{{menu.name}}
						</a-menu-item>
					</template>
				</a-menu>
			</a-layout-sider>
			<div class="layout-content">
				<router-view />
			</div>
		</a-layout>
	</a-layout>
</template>
<script>
import constant from "@/constant";
export default {
	data() {
		return {
			constant: constant.menu,
			openKeys: [],
			selectedKeys: ['main']
		};
	},
	methods: {
		changeNemu(item) {
			this.$router.push(item.path)
			// 将当前菜单存储在本地
			localStorage.setItem('currentMenu', item.name)
		},
		logout() {
			const that = this;
			this.$confirm({
				title: '确认退出登录？',
				okText: '确认',
				cancelText: '取消',
				onOk() {
					// 1.清空本地存储的 token 和 currentMenu
					window.localStorage.removeItem("token");
					window.localStorage.removeItem("currentMenu");
					// 2.跳转到登录页面
					that.$router.push({ path: "/login" });
				}
			});
		}
	},
	mounted() {
		const key = localStorage.getItem('currentMenu');
		if(key) {
			this.selectedKeys = [key];
			// 判断当前key在那个菜单里
			this.constant.map(submenu => {
				submenu.children && submenu.children.map(item => {
					if(key === item.name) {
						this.openKeys = [submenu.name]
					}
				})
			})
		}
	}
};
</script>

<style lang="less" scoped>
.layout-main-box {
	width: 100%;
	height: 100%;
	.layout-header{
		display: flex;
		.logout{
			margin-left: auto;
			color: #fff;
			cursor: pointer;
		}
	}
	.layout-main-content{
		.layout-aside{
			width: 200px;
			background: #fff
		}
		.layout-content{
			padding: 24px;
			flex: 1;
		}
	}
}
</style>
